// 胜率分析柱状图
import * as echarts from "echarts";
import store from "../store";
let teamname = store.getters.getTeamName
let teamdefeat = store.getters.getDefeat
let teamvitory = store.getters.getVicory
let teamwinrate = store.getters.getWinRate

let category = [...teamname];
let dottedBase = [];
let lineData = [...teamvitory];
let barData = [...teamdefeat];

let option = {
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(255,255,255,0.1)",
    axisPointer: {
      type: "shadow",
      label: {
        show: true,
        backgroundColor: "#7B7DDC",
      },
    },
  },
  legend: {
    data: ["胜利", "失败", "胜率"],
    textStyle: {
      color: "#fdf9f9",
    },
    top: "7%",
  },
  grid: {
    x: "12%",
    width: "82%",
    top: "18%",
    bottom:"12%",
  },
  xAxis: {
    data: category,
    axisLine: {
      lineStyle: {
        color: "#fdf9f9",
      },
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: [
    {
      splitLine: { show: false },
      axisLine: {
        lineStyle: {
          color: "#fdf9f9",
        },
      },
      axisLabel: {
        formatter: "{value} ",
      },
    },
    {
      splitLine: { show: false },
      axisLine: {
        lineStyle: {
          color: "#B4B4B4",
        },
      },
      axisLabel: {
        formatter: "{value}% ",
      },
    },
  ],

  dataZoom: [
    //滚动条
    {
      show:false,
      type: "slider",
      startValue: 0,
      endValue: 14,
      showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
    },
    {
      type: "inside",  // 支持内部鼠标滚动平移
      xAxisIndex: [0 ,1],
      zoomOnMouseWheel: false,  // 开启滚轮缩放
      moveOnMouseMove: true, //鼠标滚轮触发滚动
      moveOnMouseWheel: true,
    }
  ],

  series: [
    {
      name: "胜率",
      type: "line",
      smooth: true,
      showAllSymbol: true,
      symbol: "emptyCircle",
      symbolSize: 8,
      yAxisIndex: 1,
      itemStyle: {
        normal: {
          color: "#F02FC2",
        },
      },
      data: teamwinrate,
    },

    {
      name: "失败",
      type: "bar",
      barWidth: 10,
      itemStyle: {
        normal: {
          barBorderRadius: 5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#956FD4" },
            { offset: 1, color: "#3EACE5" },
          ]),
        },
      },
      data: barData,
    },

    {
      name: "胜利",
      type: "bar",
      barGap: "-100%",
      barWidth: 10,
      itemStyle: {
        normal: {
          barBorderRadius: 5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(224,28,9,0.5)" },
            { offset: 0.2, color: "rgba(162,51,36,0.3)" },
            { offset: 1, color: "rgba(114,65,60,0.2)" },
          ]),
        },
      },
      z: -12,

      data: lineData,
    },
  ],
};

export {option}
